import React, { useState, useEffect, useRef } from 'react';
import { Space, Switch, Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { PermList } from '../../service/index-roleList'

// 角色分配数据类型
interface MenuData {
  children?: MenuData[]
  createTime: number
  disabled: boolean
  isBtn: boolean
  name: string
  path: string
  pid: string
  __v: number
  _id: string
}

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface DataType {
  key: React.ReactNode;
  path: string;
  age: number;
  address: string;
  children?: DataType[];
}

const columns: TableColumnsType<DataType> = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '菜单路径',
    dataIndex: 'path',
    key: 'path',
    width: '12%',
  },
  {
    title: '权限类型',
    dataIndex: 'permission',
    width: '30%',
    key: 'permission',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '操作',
    key: 'operation',
    width: '10%',
    render: (_, record) => (
      <Space size="middle">
        <button onClick={() => { }}>编辑</button>
        <button onClick={() => { }}>删除</button>
      </Space>
    ),
  }
];

const data: DataType[] = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
];

// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const Permission = () => {
  const [checkStrictly, setCheckStrictly] = useState(false);
  const list = useRef([])

  const getListData = (data: MenuData[]) => {
    console.log(data)
    const arr = data.map(item => {
      return {
        key: 1,
        name: item.name,
        path: item.path,
        permission: item.isBtn ? '按钮' : '页面',
        children: item.children ? getListData(item.children) : [],
      }
    })
    return arr;
  }

  useEffect(() => {
    PermList().
      then(res => {
        list.current = res.data.data.list
        getListData(list.current)
      })
      .catch(err => console.log(err))
  }, [])

  return (
    <>
      <Space align="center" style={{ marginBottom: 16 }}>
        CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
      </Space>
      <Table<DataType>
        columns={columns}
        rowSelection={{ ...rowSelection, checkStrictly }}
        dataSource={data}
      />
    </>
  );
}

export default Permission